Fundamentals
Web Components
AppKit’s web components are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Using the wallet button components (Demo in our Lab), you can directly connect to the top 20 wallets, WalletConnect QR and also all the social logins.
This component allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need for the traditional modal.
Follow these steps to use the component:
Web components are global html elements that don’t require importing.
List of optional properties for AppKit web components
<appkit-button />
| Variable | Description | Type |
|---|---|---|
disabled | Enable or disable the button. | boolean |
balance | Show or hide the user’s balance. | 'show' | 'hide' |
size | Default size for the button. | 'md' | 'sm' |
label | The text shown in the button. | string |
loadingLabel | The text shown in the button when the modal is open. | string |
namespace | Option to show specific namespace account info. Note: eip155 is for EVM and bip122 is for Bitcoin. | 'eip155' | 'solana' | 'bip122' |
<appkit-account-button />
| Variable | Description | Type |
|---|---|---|
disabled | Enable or disable the button. | boolean |
balance | Show or hide the user’s balance. | 'show' | 'hide' |
<appkit-connect-button />
| Variable | Description | Type |
|---|---|---|
size | Default size for the button. | 'md' | 'sm' |
label | The text shown in the button. | string |
loadingLabel | The text shown in the button when the modal is open. | string |
<appkit-network-button />
| Variable | Description | Type |
|---|---|---|
disabled | Enable or disable the button. | boolean |
<appkit-wallet-button />
- Install the package:
- Import the library in your project:
- use the component in your project:
Options for wallet property
| Type | Options |
|---|---|
| QR Code | walletConnect |
| Wallets | metamask, trust, coinbase, rainbow, coinbase, jupiter, solflare, coin98, magic-eden, backpack, frontier, xverse, okx, bitget, leather, binance, uniswap, safepal, bybit, phantom, ledger, timeless-x, safe, zerion, oneinch, crypto-com, imtoken, kraken, ronin, robinhood, exodus, argent, and tokenpocket |
| Social logins | google, github, apple, facebook, x, discord, and farcaster |